<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-24 14:08:47
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-26 09:38:38
-->
<template>
  <BasicModal v-bind="$attrs" @ok="handleOk" @register="register" title="修改店铺">
    <!-- 表单信息 -->
    <BasicForm class="p-4" @register="formRegister" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { formSchemas } from './modal.data';
  import { ref } from 'vue';
  import { editStore } from '/@/api/store';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { StoreParams, StoreFormParams } from '/@/api/store/model/storeModel';
  let reload = () => {};
  const recordId = ref<number>(0);
  const [formRegister, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: formSchemas,
    layout: 'vertical',
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  // 初始化表单数据
  const [register, { closeModal, changeOkLoading }] = useModalInner((data) => {
    reload = data.reload;
    const { store_name, user_name, sort } = data.record;
    setFieldsValue({ store_name, user_name, password: '', sort, password_confirm: '' });
    recordId.value = data.record.store_id;
  });
  // 更改信息
  const handleOk = () => {
    let value = getFieldsValue() as StoreFormParams;
    let param = { form: value, storeId: recordId.value } as StoreParams;
    changeOkLoading(true);
    const { createMessage } = useMessage();
    editStore(param)
      .then(({ code, message }) => {
        code === 0 && createMessage.success(message);
        reload();
        closeModal();
      })
      .catch(() => {
        createMessage.error('修改失败');
      })
      .finally(() => {
        resetFields();
        changeOkLoading(false);
      });
  };
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
  }
</style>
